<template>
  <div class="diagnose_6b_form">
    <el-form :model="form" :rules="rules" label-position="right" label-width="220px" size="small">
      <el-form-item label="是否有离院运营" prop="hasDischargeOperations">
        <el-radio-group v-model="form.hasDischargeOperations" size="mini">
          <el-radio-button style="display: inline" :label="-1">未设置</el-radio-button>
          <el-radio-button style="display: inline" :label="1">是</el-radio-button>
          <el-radio-button style="display: inline" :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否有专人做离院运营" prop="hasDischargeOperations">
        <el-radio-group v-model="form.dedicatedDischargeOperations" size="mini">
          <el-radio-button style="display: inline" :label="-1">未设置</el-radio-button>
          <el-radio-button style="display: inline" :label="1">是</el-radio-button>
          <el-radio-button style="display: inline" :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="运营执行人" prop="operationExecutor">
        <el-select v-model="form.operationExecutor" style="width: 220px">
          <el-option
            v-for="item in baseEnums.functionality"
            :key="item.code"
            :label="item.name"
            :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="离院运营是否达到预期" prop="dischargeOperationsMetExpectations">
        <el-radio-group v-model="form.dischargeOperationsMetExpectations" size="mini">
          <el-radio-button style="display: inline" :label="-1">未设置</el-radio-button>
          <el-radio-button style="display: inline" :label="1">是</el-radio-button>
          <el-radio-button style="display: inline" :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="运营亮点">
        <el-input
          v-model="form.operationHighlights"
          type="textarea"
          maxlength="128"
          show-word-limit
          style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="运营不足">
        <el-input
          v-model="form.operationWeaknesses"
          type="textarea"
          maxlength="128"
          show-word-limit
          style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="运营动作">
        <el-input
          v-model="form.operationActions"
          type="textarea"
          maxlength="128"
          show-word-limit
          style="width: 220px"></el-input>
      </el-form-item>
      <!--操作-->
      <el-form-item>
        <el-button v-if="isUpdating" type="primary" disabled icon="el-icon-loading" style="width: 120px">
          提交中
        </el-button>
        <el-button v-else-if="form.id === undefined" type="primary" @click="handleSubmitForm(true)">保存</el-button>
        <el-button v-else type="warning" @click="handleSubmitForm(false)">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getOpaBDiagnoseByNo, getOpaBEnums, saveOpaBDiagnoseByNo } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const EmptyOpaBData = {
  id: undefined,
  hasDischargeOperations: -1, // NOT NULL
  dedicatedDischargeOperations: -1, // NOT NULL
  operationExecutor: undefined, // NOT NULL
  dischargeOperationsMetExpectations: -1, // NOT NULL
  operationHighlights: '',
  operationWeaknesses: '',
  operationActions: '',
  coachId: null,
  coachName: null,
};

export default {
  name: 'Diagnose6b',
  data() {
    return {
      baseEnums: {},
      salon: {},
      form: EmptyOpaBData,
      rules: {
        // hasDischargeOperations: [{ required: true, message: '是否有离院运营不能为空', trigger: 'blur' }],
        // dedicatedDischargeOperations: [{ required: true, message: '是否有专人做离院运营不能为空', trigger: 'blur' }],
        // operationExecutor: [{ required: true, message: '运营执行人不能为空', trigger: 'blur' }],
        // dischargeOperationsMetExpectations: [
        //   { required: true, message: '离院运营是否达到预期不能为空', trigger: 'blur' },
        // ],
      },
      isUpdating: false,
      isFetching: false,
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  created() {
    this.loadOpaBEnums();
  },
  methods: {
    loadOpaBEnums: async function () {
      const errAlertMsg = '查询类型失败';
      getOpaBEnums()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.baseEnums = Object.assign({}, ret);
          }
        })
        .catch(err => {
          console.log('getStaffEnums', err);
          MessageBox.alert(errAlertMsg);
        });
    },
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      this.loadDiagnose6b();
    },
    loadDiagnose6b: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      this.form = Object.assign({}, EmptyOpaBData);
      const errAlertMsg = '查询B活动复盘信息失败';
      await getOpaBDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.form = Object.assign({}, ret);
          }
        })
        .catch(err => {
          console.log('getOpaBDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    handleSubmitForm: async function (isadd) {
      const row = this.form;
      // Validate row data against rules
      for (const key in this.rules) {
        if (this.rules.hasOwnProperty(key)) {
          const rule = this.rules[key][0];
          if (rule.required && (row[key] === undefined || row[key] === null)) {
            MessageBox.alert(rule.message);
            return;
          }
          if (rule.type === 'array' && row[key].length < rule.min) {
            MessageBox.alert(rule.message);
            return;
          }
          if (rule.type === 'number' && typeof row[key] !== 'number') {
            MessageBox.alert(rule.message);
            return;
          }
        }
      }

      if (row.id <= 0) {
        row.id = null;
      }

      this.isUpdating = true;
      const errAlertMsg = '保存B活动复盘信息失败';
      saveOpaBDiagnoseByNo(this.salon.diagnoseNo, row)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.loadDiagnose6b();
          MessageBox.alert('保存成功');
        })
        .catch(err => {
          console.log('saveOpaBDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isUpdating = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.diagnose_6b_form {
  color: inherit;
}
.diagnose_6b_form label {
  width: 90px;
  color: #99a9bf;
}
.diagnose_6b_form .el-form-item {
  margin-right: 0;
  margin-bottom: 5px;
  width: 50%;
}
</style>
